<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增用户')" />
	<!--<th:block th:include="include :: select2-css" />-->
</head>
<body>
    <div class="main-content">
        <form id="form-user-add" class="form-horizontal">
            <input name="deptId" type="hidden" id="treeId"/>
            <div style="display: flex;flex-direction: row;align-items: center;font-size: 20px;">
                <div style="height: 20px;width: 5px;background-color: #206ef7;margin-right: 5px;"></div>
                <h4 class="h4" style="font-size: 15px">来电人信息</h4>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label ">来电号码：</label>
                        <div class="col-sm-8">
                            <div class="form-control" style="border: none">18337749367</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label ">来电号码：</label>
                        <div class="col-sm-8">
                            <div class="form-control" style="border: none">6.3分钟</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label ">历史来电数：</label>
                        <div class="col-sm-8">
                            <div class="form-control" style="border: none">105</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label ">历史不满意数：</label>
                        <div class="col-sm-8">
                            <div class="form-control" style="border: none">100</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-sm-2 control-label ">常涉及问题：</label>
                        <div class="col-sm-8">
                            <div class="form-control" style="border: none">农村农业  城乡建设  噪音扰民</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="display: flex;flex-direction: row;align-items: center;font-size: 20px;">
                <div style="height: 20px;width: 5px;background-color: #206ef7;margin-right: 5px;"></div>
                <h4 class="h4" style="font-size: 15px">受理模块</h4>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">详细地址：</label>
                        <div class="col-sm-8">
                            <input name="address" placeholder="请输入详细地址" class="form-control" type="text"  required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">来电类容：</label>
                        <div class="col-xs-10">
                            <textarea  name="phoneRemark" maxlength="1000" class="form-control phoneRemark" rows="3" style="height: 150px"></textarea>

                            <span>还可以输入<i class="phoneRemarkI">1000</i>个文字</span>
                            <button type="button" class="btn btn-sm btn-primary" style="position: absolute;right: 15px" onclick="identification()">智能预载</button>
                            <button type="button" class="btn btn-sm btn-primary" style="position: absolute;right: 100px" onclick="similarity()">相识列表</button>

                        </div>
                    </div>
                </div>
            </div>

            <div style="display: flex;flex-direction: row;align-items: center;font-size: 20px;">
                <div style="height: 20px;width: 5px;background-color: #206ef7;margin-right: 5px;"></div>
                <h4 class="h4" style="font-size: 15px">基本信息</h4>
            </div>
<!--            <div class="row">-->
<!--            	<div class="col-sm-6">-->
<!--                    <div class="form-group">-->
<!--                        <label class="col-sm-4 control-label ">流水号：</label>-->
<!--                        <div class="col-sm-8">-->
<!--                            <input name="serial" placeholder="请输入流水号" class="form-control" type="text" maxlength="30" required>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-sm-6">-->
<!--                    <div class="form-group">-->
<!--                        <label class="col-sm-4 control-label">提取码：</label>-->
<!--                        <div class="col-sm-8">-->
<!--                            	<input name="code"  type="text" placeholder="请输入提取码" class="form-control">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">来电类别：</label>
                        <div class="col-sm-8">
                            <select name="phoneCategory" id="phoneCategory" class="form-control m-b phoneCategory" >
                                <option value="">-请选择-</option>
                                <option value="1">投诉</option>
                                <option value="2">建议</option>
                                <option value="3">表扬</option>

                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">类容类别：</label>
                        <div class="col-sm-8">
                            <select name="remarkCategory" id="remarkCategory" class="form-control m-b" >
                                <option selected>-请选择-</option>
                                <option value="1">农村农业</option>
                                <option value="2">城乡建设</option>
                                <option value="3">劳动和社会保障</option>

                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">证件：</label>
                        <div class="col-sm-8">
                            <select name="certificate" id="certificate" class="form-control m-b" >
                                <option selected>-请选择-</option>
                                <option value="1">身份证</option>
                                <option value="2">军官证</option>
                                <option value="3">护照</option>

                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">来电人名：</label>
                        <div class="col-sm-8">
                            <input name="phoneName" id="phoneName" placeholder="请输入来电人名" class="form-control" type="text"  required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">性别：</label>
                        <div class="col-sm-8">
                            <select name="sex" id="sex" class="form-control m-b">
                                <option selected>-请选择-</option>
                                <option value="1">男</option>
                                <option value="2">女</option>
				            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">联系电话：</label>
                        <div class="col-sm-8">
                            <input name="contactNumber" id="contactNumber" placeholder="请输入联系电话" class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
            	<div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">电子邮件：</label>
                        <div class="col-sm-8">
                            <input name="email" id="email" placeholder="请输入电子邮件" class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
            </div>

            <div style="display: flex;flex-direction: row;align-items: center;font-size: 20px;">
                <div style="height: 20px;width: 5px;background-color: #206ef7;margin-right: 5px;"></div>
                <h4 class="h4" style="font-size: 15px">坐席情况</h4>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">屏蔽号码：</label>
                        <div class="col-xs-10">
                            <label class="check-box">
                                <input name="role" type="radio">是
                            </label>
                            <label class="check-box">
                                <input name="role" type="radio">否
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">同意公开：</label>
                        <div class="col-xs-10">
                            <label class="check-box">
                                <input name="role" type="radio">是
                            </label>
                            <label class="check-box">
                                <input name="role" type="radio">否
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">重复来电：</label>
                        <div class="col-xs-10">
                            <label class="check-box">
                                <input name="role" type="radio">是
                            </label>
                            <label class="check-box">
                                <input name="role" type="radio">否
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">处理选项：</label>
                        <div class="col-xs-10">
                            <label class="check-box">
                                <input name="role" type="radio">存草稿
                            </label>
                            <label class="check-box">
                                <input name="role" type="radio">转值班长处理
                            </label>
                            <label class="check-box">
                                <input name="role" type="radio">当场解答
                            </label>
                            <label class="check-box">
                                <input name="role" type="radio">无效来电
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">坐席备注：</label>
                        <div class="col-xs-10">
                            <textarea name="SeatsRemark" maxlength="3500" class="form-control SeatsRemark" rows="3"></textarea>
                            <span>还可以输入<i class="SeatsRemarkI">3500</i>个文字</span>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
      
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
	<th:block th:include="include :: footer" />
	<!--<th:block th:include="include :: select2-js" />-->
	<script>
        (function( ){
            //计算剩余字数
            var textArea = $('.SeatsRemark');
            var numItem = $('.SeatsRemarkI');
            var max = numItem.text(); //i标签中的内容，也就是最多可以显示的字符数
            var curLength = textArea.val().length; //当前的字符数

            textArea.attr('maxlength',max); //设置最大字符数，如果去掉的话，i标签内会出现负数
            numItem.text(max - curLength); //实时更新i标签中的数量
            textArea.on('input propertychange', function () {
                //$(this) ---> 指代textarea
                numItem.text(max - $(this).val().length);
            });

            var textArea = $('.phoneRemark');
            var numItem = $('.phoneRemarkI');
            var max = numItem.text();
            var curLength = textArea.val().length;

            textArea.attr('maxlength',max);
            numItem.text(max - curLength);
            textArea.on('input propertychange', function () {
                numItem.text(max - $(this).val().length);
            });

        //    绑定快捷键 ALT+Z
            shortcut = {
                'all_shortcuts':{},//All the shortcuts are stored in this array
                'add': function(shortcut_combination,callback,opt) {
                    //Provide a set of default options
                    var default_options = {
                        'type':'keydown',
                        'propagate':false,
                        'disable_in_input':false,
                        'target':document,
                        'keycode':false
                    }
                    if(!opt) opt = default_options;
                    else {
                        for(var dfo in default_options) {
                            if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];
                        }
                    }

                    var ele = opt.target;
                    if(typeof opt.target == 'string') ele = document.getElementById(opt.target);
                    var ths = this;
                    shortcut_combination = shortcut_combination.toLowerCase();

                    //The function to be called at keypress
                    var func = function(e) {
                        e = e || window.event;

                        if(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields
                            var element;
                            if(e.target) element=e.target;
                            else if(e.srcElement) element=e.srcElement;
                            if(element.nodeType==3) element=element.parentNode;

                            if(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;
                        }

                        //Find Which key is pressed
                        if (e.keyCode) code = e.keyCode;
                        else if (e.which) code = e.which;
                        var character = String.fromCharCode(code).toLowerCase();

                        if(code == 188) character=","; //If the user presses , when the type is onkeydown
                        if(code == 190) character="."; //If the user presses , when the type is onkeydown

                        var keys = shortcut_combination.split("+");
                        //Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked
                        var kp = 0;

                        //Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken
                        var shift_nums = {
                            "`":"~",
                            "1":"!",
                            "2":"@",
                            "3":"#",
                            "4":"$",
                            "5":"%",
                            "6":"^",
                            "7":"&",
                            "8":"*",
                            "9":"(",
                            "0":")",
                            "-":"_",
                            "=":"+",
                            ";":":",
                            "'":"\"",
                            ",":"<",
                            ".":">",
                            "/":"?",
                            "\\":"|"
                        }
                        //Special Keys - and their codes
                        var special_keys = {
                            'esc':27,
                            'escape':27,
                            'tab':9,
                            'space':32,
                            'return':13,
                            'enter':13,
                            'backspace':8,

                            'scrolllock':145,
                            'scroll_lock':145,
                            'scroll':145,
                            'capslock':20,
                            'caps_lock':20,
                            'caps':20,
                            'numlock':144,
                            'num_lock':144,
                            'num':144,

                            'pause':19,
                            'break':19,

                            'insert':45,
                            'home':36,
                            'delete':46,
                            'end':35,

                            'pageup':33,
                            'page_up':33,
                            'pu':33,

                            'pagedown':34,
                            'page_down':34,
                            'pd':34,

                            'left':37,
                            'up':38,
                            'right':39,
                            'down':40,

                            'f1':112,
                            'f2':113,
                            'f3':114,
                            'f4':115,
                            'f5':116,
                            'f6':117,
                            'f7':118,
                            'f8':119,
                            'f9':120,
                            'f10':121,
                            'f11':122,
                            'f12':123
                        }

                        var modifiers = {
                            shift: { wanted:false, pressed:false},
                            ctrl : { wanted:false, pressed:false},
                            alt  : { wanted:false, pressed:false},
                            meta : { wanted:false, pressed:false}	//Meta is Mac specific
                        };

                        if(e.ctrlKey)	modifiers.ctrl.pressed = true;
                        if(e.shiftKey)	modifiers.shift.pressed = true;
                        if(e.altKey)	modifiers.alt.pressed = true;
                        if(e.metaKey)   modifiers.meta.pressed = true;

                        for(var i=0; k=keys[i],i<keys.length; i++) {
                            //Modifiers
                            if(k == 'ctrl' || k == 'control') {
                                kp++;
                                modifiers.ctrl.wanted = true;

                            } else if(k == 'shift') {
                                kp++;
                                modifiers.shift.wanted = true;

                            } else if(k == 'alt') {
                                kp++;
                                modifiers.alt.wanted = true;
                            } else if(k == 'meta') {
                                kp++;
                                modifiers.meta.wanted = true;
                            } else if(k.length > 1) { //If it is a special key
                                if(special_keys[k] == code) kp++;

                            } else if(opt['keycode']) {
                                if(opt['keycode'] == code) kp++;

                            } else { //The special keys did not match
                                if(character == k) kp++;
                                else {
                                    if(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase
                                        character = shift_nums[character];
                                        if(character == k) kp++;
                                    }
                                }
                            }
                        }

                        if(kp == keys.length &&
                            modifiers.ctrl.pressed == modifiers.ctrl.wanted &&
                            modifiers.shift.pressed == modifiers.shift.wanted &&
                            modifiers.alt.pressed == modifiers.alt.wanted &&
                            modifiers.meta.pressed == modifiers.meta.wanted) {
                            callback(e);

                            if(!opt['propagate']) { //Stop the event
                                //e.cancelBubble is supported by IE - this will kill the bubbling process.
                                e.cancelBubble = true;
                                e.returnValue = false;

                                //e.stopPropagation works in Firefox.
                                if (e.stopPropagation) {
                                    e.stopPropagation();
                                    e.preventDefault();
                                }
                                return false;
                            }
                        }
                    }
                    this.all_shortcuts[shortcut_combination] = {
                        'callback':func,
                        'target':ele,
                        'event': opt['type']
                    };
                    //Attach the function with the event
                    if(ele.addEventListener) ele.addEventListener(opt['type'], func, false);
                    else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);
                    else ele['on'+opt['type']] = func;
                },

                //Remove the shortcut - just specify the shortcut and I will remove the binding
                'remove':function(shortcut_combination) {
                    shortcut_combination = shortcut_combination.toLowerCase();
                    var binding = this.all_shortcuts[shortcut_combination];
                    delete(this.all_shortcuts[shortcut_combination])
                    if(!binding) return;
                    var type = binding['event'];
                    var ele = binding['target'];
                    var callback = binding['callback'];

                    if(ele.detachEvent) ele.detachEvent('on'+type, callback);
                    else if(ele.removeEventListener) ele.removeEventListener(type, callback, false);
                    else ele['on'+type] = false;
                }
            }
            shortcut.add("ALT+Z",function() {
                var textArea = $('.phoneRemark');
                console.log(textArea.val());
                if(textArea.val()=='医疗'){
                    textArea.val("医院名称:\n医院地址:\n科室:\n医生:\n患者姓名:\n就诊卡号:\n患者身份证号:");

                }else if(textArea.val()=='购物'){
                    textArea.val("电视台(商铺):\n购买时间:\n产品名称:\n消费金额:\n商家名称:\n商家地址:\n收货人:\n收货人地址");
                }
            });



        })()
        //    （智能预载）识别类容
        function identification(){
            $("#phoneCategory").val(2);
            $("#remarkCategory").val(2);
            $("#certificate").val(1);
            $("#phoneName").val("罗先生");
            $("#contactNumber").val("17608719956");
            $("#sex").val(1);
            $("#email").val("17608719956@163.com");

        }
        //    相似列表
        function similarity(){
            // window.open("http://localhost:8082/add.html");
            var url = 'http://localhost:8082/add.html';
            var title = '相似列表';
            var options = {
                url: url,
                title: title
            }
            popupDialog(options);
        }
    </script>
</body>
</html>
